$('.menu').on('click',function(){
    $('#music-list-dialog')
    .animate({
        top:'10rem'
    },100);
})
$('#btn-close').click(function(){
    $('#music-list-dialog')
    .animate({
        top:'100%'
    },100)
})
var k=true
let i=0;
const player = $('<audio>')
$('.res').click(function(){
    if(i==0){
        $('.res>i').removeClass('fa-music').addClass("fa-random")
        i=1;
    }else if(i==1){
        $('.res>i').removeClass('fa-random').addClass("fa-refresh")
        i=2
    }else if(i==2){
        $('.res>i').removeClass('fa-refresh').addClass("fa-music")
        i=0
    }
})
$('.sta').click(function(){
    zhuan()
})
function zhuan(){
    if(k){
        $('#star').attr("class","fa fa-pause fa-3x")
        $('.disc').addClass("playing")
        startPlay()
        
    }
        
    else{
        $('#star').attr("class","fa fa-play fa-3x")
        $('.disc').removeClass("playing")
        player.trigger('pause')
    }
    k=!k
}

const baseURL = 'http://home.softeem.xin:8088/music/listAll'
let musics =[]
let currentIndex=0
let now=0;
let total = 0;
$.get(baseURL,function(data){
    musics=data
    $.each(musics,(i,m) =>{
        $('#music-list').append(`<li data-index="${i}">${m.name}</li>`)
    })
    player.prop('src',musics[currentIndex].path)
})

$('#music-list').on('click','li',function(){
    currentIndex=$(this).data('index')
    let m =musics[currentIndex]
    player.prop('src',m.path)
    $('.music-name').empty()
    $('.music-name').append(`<div>${m.name}</div>`)
    k=true
    $("li").removeClass("selected")
    $(this).addClass("selected")
    zhuan()
    startPlay()
})
function startPlay(){
        let flag = setInterval(function(){
        let state = player.prop('readyState')
        if(state===4){
            player.trigger('play')
            clearInterval(flag)
    }
    },100)
    $('.blur-img,.ablum-img').prop('src',musics[currentIndex].ablumImg)
}
player.on('loadeddata',function(){
    total = this.duration
    $('.time-total').text(fmtTime(total))
})
player.on('timeupdate',function(){
    now=this.currentTime
    $('.time-now').text(fmtTime(now))
    $('.progress').animate({width:`${100*now/total}%`},100)
    if(i!=2){
        if(now==total)
            next()
    }
    else if(i==2&&now==total){
        player.trigger("pause")
        player.trigger("play")
    }

})
function fmtTime(t){
    t = new Date(t*1000)
    let m = t.getMinutes()
    let s = t.getSeconds()
    m=m<10?'0'+m:m
    s=s<10?'0'+s:s
    return `${m}:${s}`
}
$('.box-progress').on('click',function(e){
    let w= $(this).width()
    let x= e.offsetX
    now =x/w*total
    player.prop('currentTime',now)
})
$('.lef').click(function(){
    if(i==1){
        currentIndex=generate_rand_num(0,musics.length-1)
    }
    else{
        currentIndex--;
        if(currentIndex==-1)
            currentIndex=44  
        }  
        player.prop('src',musics[currentIndex].path)
        $('.music-name').text(musics[currentIndex].name)
        startPlay()
        $("li").removeClass("selected")
})
$('.rig').click(function(){
    next()       
})
function next(){
    if(i==1){
        currentIndex=generate_rand_num(0,musics.length-1)
    }
    else{
    currentIndex++;
    if(currentIndex==45)
        currentIndex=0
    }
    player.prop('src',musics[currentIndex].path)
    $('.music-name').text(musics[currentIndex].name)
    startPlay()
    $("li").removeClass("selected") 
}
function generate_rand_num(min_v, max_v) {
    var rand_num = parseInt(Math.random() * (max_v - min_v + 1) + min_v);
    return rand_num
}